<template>
<label :for="name">
    <slot name='title'><span class="inp-title">{{title}}</span></slot>
    <slot name='inp'>
        <input 
            :type="type" 
            :id="name" 
            class="inp" 
            :name="name" 
            :min='min' 
            :max='max' 
            :minlength="minlength" 
            :maxlength="maxlength"
            :placeholder="placeholder || title"
            :readonly="readonly"
            :autofocus="autofocus"
            :required='required'
            :value="value"
            @input="handleInput"
        >
    </slot>
    <div 
        class="is-validata-rule" 
        v-if="isvalidatarule"
    >
        <!-- :style="isvalidatarule ? {opacity:1} : {opacity:0}" -->
        <span v-show="rulebool" style="color: #4be44b;">√</span>
        <span v-show="!rulebool" style="color: red;">×</span>
    </div>
</label>
</template>

<script>
export default {
    name: "myInput",
    props: {
        value: [String, Number],
        type: {
            type: String,
            default: "text"
        },
        name: {
            type: String,
            default: ""
        },
        title: {
            type: String
        },
        placeholder: {
            type: String
        },
        min: {
            type: Number
        },
        max: {type: Number},
        minlength: {
            type: Number,
        },
        maxlength: {
            type: Number,
        },
        readonly: {
            type: Boolean,
            default: false
        },
        required: {
            type: Boolean,
            default: false
        },
        autofocus: {
            type: Boolean,
            default: false
        },
        isvalidatarule: {
            type: Boolean,
            default: false
        },
        rulebool: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleInput(e) {
            e.target.value = e.target.value.replace(/\s/g, '')
            if(e.target.name === "tele") {
                e.target.value = e.target.value.replace(/[^\d]+/, '')
            }
            this.$emit('input', e.target.value)
        }
    }
}
</script>

<style scoped>
label {
    display: flex;
    margin: 12px 0;
}
.inp-title {
    position: relative;
    min-width: 96px;
    height: 34px;
    line-height: 34px;
    padding-right: 16px;
    text-align-last: justify;
    white-space: nowrap;
}
.inp-title::after {
    content: "*";
    position: absolute;
    top: 0;
    left: -10px;
    color: red;
}
.inp {
    width: 320px;
    height: 34px;
    line-height: 34px;
    padding: 3px 8px;
    font-size: 18px;
    border: none;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #d6d6d6;
    box-sizing: border-box;
    transition: background-color 0.32s;
}
.inp:hover {
    background-color: #f0f0f0;
}
.is-validata-rule {
    width: 34px;
    height: 34px;
    padding-left: 12px;
    line-height: 34px;
    font-size: 20px;
    user-select: none;
}
</style>